<template>
  <main-box>
    <PlusSearch
      v-model="queryform"
      :columns="formConfig"
      :show-number="2"
      label-width="80"
      label-position="right"
      class="mb-xs"
      @search="initData(true)"
      @reset="initData(true)"
    >
      <template #plus-field-warehouseId>
        <k-select-http
          v-model="queryform.warehouseId"
          paramsKey="searchValue"
          :immediately="true"
          :httpfn="getWarehouseList"
          placeholder="请选择工具室"
          :keyprops="{ label: 'name', value: 'warehouseId' }"
        /> </template
    ></PlusSearch>
    <div class="mb-2">
      <btnExport
        :queryform="queryform"
        :exportApi="exportApi"
        downloadName="工具设施数据"
      />
    </div>

    <PureTable
      ref="tableRef"
      border
      adaptive
      :loading="loading"
      :data="tableData"
      :columns="columns"
      :pagination="pagination"
      @page-size-change="initData()"
      @page-current-change="initData(false)"
    >
      <template #picUrl="{ row }">
        <el-image
          v-for="(item, index) in getArr(row.picUrl)"
          :key="index"
          style="width: 50px; max-width: 100%; height: 50px"
          :src="item"
          :preview-src-list="getArr(row.picUrl)"
          :preview-teleported="true"
          :initial-index="index"
          class="mr-1"
        />
      </template>
    </PureTable>
  </main-box>
</template>

<script setup lang="tsx">
import { onMounted, ref } from "vue";
import { useTableConfig } from "@/utils/tableConfig";
import { type PlusColumn, PlusSearch } from "plus-pro-components";
import btnExport from "@/components/btnExport/index.vue";
import kSelectHttp from "@/components/k-select-http/index.vue";
import { allListApi as getWarehouseList } from "@/api/warehouse";
import { exportApi, listApi } from "@/api/facility";
/* 查询表单 */
const formConfig: PlusColumn[] = [
  { label: "工具室", prop: "warehouseId" },
  {
    label: "查询",
    prop: "searchValue",
    fieldProps: { placeholder: "设施编号/IP地址/物理地址" }
  }
];
const queryform = ref({ warehouseId: "", searchValue: "" });

/* 表格数据 */
const { pagination } = useTableConfig();
const tableData = ref([]);
const loading = ref(false);
const columns = [
  { label: "设施图片", prop: "picUrl", slot: "picUrl" },
  { label: "设施编号", prop: "code" },
  { label: "设施名称", prop: "name" },
  { label: "设施类型", prop: "categoryName" },
  {
    label: "联网状态",
    prop: "model",
    cellRenderer: ({ row }) => {
      const txt = row.networkState == 1 ? "在线" : "下线";
      const col = row.networkState == 1 ? "primary" : "info";
      return <el-tag type={col}>{txt}</el-tag>;
    }
  },
  { label: "IP地址", prop: "ipAddr" },
  { label: "物理地址", prop: "macAddr" },
  {
    label: "运行状态",
    prop: "state",
    cellRenderer: ({ row }) => {
      const txt = row.state == 1 ? "正常" : "停用";
      const col = row.state == 1 ? "success" : "danger";
      return <el-tag type={col}>{txt}</el-tag>;
    }
  },
  { label: "添加时间", prop: "createTime" },
  { label: "工具室", prop: "warehouseName" }
];

const initData = (needInit = true) => {
  loading.value = true;
  if (needInit) {
    pagination.currentPage = 1;
  }
  const params = {
    ...queryform.value,
    pageSize: pagination.pageSize,
    pageNum: pagination.currentPage
  };
  listApi(params)
    .then(res => {
      tableData.value = res.rows;
      loading.value = false;
      pagination.total = Number(res.total);
    })
    .catch(() => {
      loading.value = false;
    });
};
onMounted(() => {
  initData();
});

/* 把字符串转为数组 */
const getArr = (str: any = "") => {
  return str ? str.split(",") : [];
};
</script>
